<template>
	<view class="content">
		<view class="orderList">
			<view class="orderItem" v-for="(item, index) in orderList">
				<view class="top">
					<view class="title">
						订单已送出
					</view>
					<view v-if="index === 0" class="time">
						预计送达时间：{{ startTime(item.createTime) }}～{{endTime(item.createTime)}}
					</view>
					<view v-else class="time">
						已完成配送
					</view>
				</view>
				<view class="bottom">
					<view class="name">
						<text>姓名： </text>
						{{ item.name }}
					</view>
					<view class="address">
						<text>配送地址：</text>
						{{ item.address }}
					</view>
					<view class="mobile">
						<text>联系电话：</text>
						{{ item.mobile }}
					</view>
					<view class="time">
						<text>下单时间：</text>
						{{ filterTime(item.createTime) }}
					</view>
					<view class="orderImgs">
						<view class="img" v-for="item in item.imageValue">
							<image :src="item" mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"

	const orderList = ref([])

	async function getAll() {
		const {
			result: {
				data
			}
		} = await uniCloud.callFunction({
			name: "order_get_all"
		})
		orderList.value = data
		// 反转数据
		orderList.value.reverse()

		uni.hideLoading()
	}

	getAll()

	function fillZero(val) {
		return val < 10 ? '0' + val : val;
	}

	function filterTime(time) {
		const newTime = new Date(time)
		let year = newTime.getFullYear()
		let month = newTime.getMonth() + 1
		let day = newTime.getDay() + 1
		let hour = newTime.getHours()
		let minute = newTime.getMinutes()
		let second = newTime.getSeconds()

		return `${year}-${fillZero(month)}-${fillZero(day)} ${fillZero(hour)}:${fillZero(minute)}:${fillZero(second)}`
	}

	function startTime(time) {
		const newTime = new Date(time)
		let hour = newTime.getHours()
		let minute = newTime.getMinutes()
		return `${fillZero(hour)}:${fillZero(minute)}`
	}

	function endTime(time) {
		const newTime = new Date(time)
		let hour = newTime.getHours() + 1
		let minute = newTime.getMinutes()
		return `${fillZero(hour)}:${fillZero(minute)}`
	}

	onLoad(() => {
		// 加载框
		uni.showLoading({
			title: "加载中..."
		})
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;

		.orderList {
			.orderItem {
				width: 100%;
				margin: 20rpx 0;
				box-sizing: border-box;
				border-radius: 24rpx;
				overflow: hidden;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

				// 第一个订单（未完成订单）
				&:first-child {
					.top {
						background-color: #6A97FF;
						color: #fff;

						.title::before {
							background-color: #4CD964;
							box-shadow: 0 0 10rpx rgba(76, 217, 100, 0.5);
						}
					}

					.bottom {
						background-color: #F5F9FF;
					}
				}

				// 其他订单（已完成订单）
				&:not(:first-child) {
					.top {
						background-color: #8E8E93;
						color: #fff;
						opacity: 0.9;

						.title::before {
							background-color: #8E8E93;
						}
					}

					.bottom {
						background-color: #F2F2F7;
						opacity: 0.9;
					}
				}

				.top {
					padding: 30rpx 26rpx;
					font-weight: bold;

					.title {
						font-size: 24rpx;
						display: flex;
						align-items: center;

						&::before {
							content: '';
							display: inline-block;
							width: 12rpx;
							height: 12rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
					}

					.time {
						font-size: 32rpx;
						margin: 16rpx 0;
					}
				}

				.bottom {
					padding: 30rpx 26rpx;
					color: #3B3B3F;
					font-weight: bold;
					font-size: 28rpx;

					view {
						margin: 18rpx 0;

						text {
							color: #A9A9A9;
						}
					}

					.orderImgs {
						display: flex;
						flex-wrap: wrap;
						gap: 26rpx;

						.img {
							width: 200rpx;
							height: 200rpx;
							border-radius: 12rpx;
							overflow: hidden;
							box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

							image {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
					}
				}
			}
		}
	}
</style>